<!DOCTYPE html>
<html class="no-js" lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>后台管理员登录页面</title>
    <style>
        @import url("//unpkg.com/element-ui@2.15.6/lib/theme-chalk/index.css");
    </style>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="//unpkg.com/vue/dist/vue.js"></script>
    <script src="//unpkg.com/element-ui@2.15.6/lib/index.js"></script>
    <style>
        #form {
            position: absolute;
            border-radius: 10px;
            left: 50%;
            top: 50%;
            width: 460px;
            height: 280px;
            box-shadow: 2px 2px 10px #909090;
            transform: translate(-50%, -50%);
        }
        p {
            color: lightgrey;
        }
        #main {
            position: absolute;
            left: 50%;
            top: 50%;
            text-align: center;
            transform: translate(-50%, -50%);
        }
        #to {
            position: relative;
            left: 50%;
            top: 290px;
            text-align: center;
            transform: translate(-50%, 0);
        }
        h3 {
            color: #409EFF;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-form ref="form" id="form" :model="form">
            <div id="main">
                <h3>管理员登录页面</h3>
                <el-input v-model="form.name" placeholder="账号（admin）"></el-input>
                <br/><br/>
                <el-input v-model="form.password" show-password placeholder="密码（123456）"></el-input>
                <br/><br/>
                <el-button type="primary" @click="onSubmit" plain>点击登录</el-button>
            </div>
            <div id="to">
                <el-link href="/member/login" type="info">点此进入超市会员登录页面</el-link>
            </div>
        </el-form>
    </div>

    <script>
        var Main = {
            data() {
                return {
                    form: {
                        name: '',
                        password: ''
                    }
                }
            },
            methods: {
                onSubmit() {
                    var name = this.$data.form.name;
                    var password = this.$data.form.password;

                    axios.get('/admin/check/login/info', {
                      params: {
                          name: name,
                          password: password
                      }
                    }).then((response) => {
                        if (response.data === 1) {
                            window.location.assign("/admin");
                        } else {
                            this.$message({
                                message: '用户名或密码错误~！',
                                type: 'error'
                            });
                        }
                    });
                }
            }
        };
        var Ctor = Vue.extend(Main);
        new Ctor().$mount('#app')
    </script>
</body>
</html>